<template>
	<view class="">
		<!-- <view>
			<view class="maoScroll-main">
				<view class="maoScroll-count" :style="'margin-top:-'+marginTop/2+'rpx;'">
					<view v-for="(item,index) in showdata" :key="'maoScroll'+index">
						
					</view>
				</view>
			</view>
		</view> -->
		<view class="container">
			<!-- #ifdef H5 || MP-WEIXIN -->
			<view class="scroll-content">
			<!-- #endif -->
				<!-- #ifdef MP-ALIPAY -->
				<view class="scroll-content" :style="'transform: translateY('+scrollHeight +'px)'">
				<!-- #endif -->
					<view v-for="(item, index) in showdata" :key="index" class="item" id="item">
						<slot :line="item" />
					</view>
					<!-- 克隆第一个元素，实现无缝衔接 -->
					<view v-for="(item, index) in showdata" :key="index + '_clone'" class="item">
						<slot :line="item" />
					</view>
				</view>
			</view>
		</view>



</template>

<script>
	export default {
		name: 'maoScroll',
		data() {
			return {
				showdata: [],
				marginTop: 0,
				showLine: 0,
				showlen: 1,
				animation: {},
				scrollHeight:'0'
			}
		},
		props: {
			data: {
				type: Array,
				default: []
			},
			showNum: {
				type: Number,
				default: 1,
			},
			lineHeight: {
				type: Number,
				default: 60,
			},
			animationScroll: {
				type: Number,
				default: 500,
			},

		},
		mounted() {
			// #ifdef H5
			setTimeout(() => {
				const scrollContent = document.querySelector('.scroll-content');
				scrollContent.style.setProperty('--scroll-distance', -(this.showdata.length * 46) + 'px')
			}, 300)
			// #endif
			// #ifdef MP-ALIPAY
			setTimeout(() => {
				const query = my.createSelectorQuery()
				console.log(query,'queryqueryqueryqueryquery');
				query.select('#item').boundingClientRect().exec((res)=>{
					console.log(res,'itemres');
					let height = res[0].height
					this.scrollHeight = -(this.showdata.length * height.toFixed(2))
					
				})
				
			},500)


			// 动画定义（支持 opacity, translate, rotate, scale 等）



			// #endif


		},
		methods: {

			init: function() {
				this.showLine = this.showNum < this.data.length ? this.showNum : this.data.length;
				for (let i = 0; i < this.data.length; i++) {
					this.showdata.push(this.data[i]);
				}
				for (let i = 0; i < this.showLine; i++) {
					this.showdata.push(this.data[i]);
				}
				console.log(this.showdata);
				setInterval(this.animationFunc, this.animation);
			},

			animationFunc: function() {
				if (this.marginTop >= this.data.length * this.lineHeight) {
					this.marginTop = 0;
				}
				let stepTime = this.animationScroll / this.lineHeight;

				var step = 0;
				let self = this;
				var index = setInterval(function() {
					self.marginTop = self.marginTop + 1;
					step++;
					if (step >= self.lineHeight) {
						clearInterval(index);
					}
				}, stepTime);
			}
		},
		watch: {
			data: {
				immediate: true,
				handler(newValue) {
					console.log(newValue);
					this.showdata = newValue
				}
			}
		}
	}
</script>

<style>
	.maoScroll-main {
		width: 100%;
		overflow: hidden;
		// background-color: red !important;
		height: 138rpx !important;
	}

	.container {
		width: 100%;
		height: 138rpx;
		overflow: hidden;
		position: relative;
	}

	.scroll-content {
		--scroll-distance: 0px;
		display: flex;
		flex-direction: column;
		animation: scroll 6s linear infinite;
		/* 动画时间和线性效果 */
	}

	@keyframes scroll {
		0% {
			transform: translateY(0);
		}

		/* #ifdef H5 */
		100% {
			transform: translateY(var(--scroll-distance));
		}

		/* #endif */

	}
</style>